<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="$t('pro.AddTransactionID.title')"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="breadcrumb">
        <a-breadcrumb :routes="routes">
          <template slot="itemRender" slot-scope="{route, params, routes}">
            <span v-if="routes.indexOf(route) === routes.length - 1">
              {{route.breadcrumbName}}
            </span>
            <router-link v-else :to="route.path">
              {{route.breadcrumbName}}
            </router-link>
          </template>
        </a-breadcrumb>
      </div>
      <div class="portlet">
        <div class="grid grid-col-3">
          <div>
            <div class="grid-item-title">
              <h3>{{ $t('pro.AddTransactionID.PaymentInfo') }}</h3>
            </div>
            <div class="addtransaction-form">
              <a-spin :spinning="loading">
                <a-form
                :form="form"
                layout="vertical"
                @submit="handleSubmit"
              >
                <a-form-item :label="$t('pro.AddTransactionID.Amount')">
                  <a-input
                    placeholder="0.00"
                    v-decorator="[
                    'price',
                    {
                      rules: [{
                        required: true, message: $t('pro.AddTransactionID.amountMessage'),
                      }],
                    }
                    ]"
                  />
                </a-form-item>

                <a-form-item :label="$t('pro.AddTransactionID.User')">
                  <a-select
                    style="width: 100%;"
                    showSearch
                    :placeholder="$t('pro.AddTransactionID.SelectUser')"
                    v-decorator="['userId',
                      {
                        rules: [{
                          required: true, message: $t('pro.AddTransactionID.userMessage'),
                        }],
                      }
                    ]"
                  >
                    <a-select-option
                      v-for="(user, key) in userByCompanys"
                      :key="key"
                      :value="user.value"
                      @click="changeUserByCompany(user.id)"
                    >{{user.value}}</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item :label="$t('pro.AddTransactionID.Method')">
                  <a-select
                    style="width: 100%;"
                    v-decorator="['type', { initialValue: 1 }]"
                  >
                    <a-select-option
                      v-for="(method) in methods"
                      :key="method.value"
                      :value="method.key"
                    >{{method.value}}</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item :label="$t('pro.AddTransactionID.Text')">
                  <a-textarea
                    :rows="6"
                    v-decorator="['remarks']"
                  ></a-textarea>
                </a-form-item>

                <a-form-item>
                  <a-button type="primary" html-type="submit">{{ $t('pro.public.buttonSave') }}</a-button>
                </a-form-item>
              </a-form>
              </a-spin>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { userRecharge } from '../../api/user'
export default {
  data() {
    return {
        form: this.$form.createForm(this),
        userByCompanyDefault: '',
        loading: false,
        userId: this.$route.params.userId || "",
    }
  },
  methods: {
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
              this.loading = true;
              setTimeout(() => {
                  values.status = "1";
                  values.userId = this.userId;
                  userRecharge(values).then(res => {
                      let { code } = res.data || {}
                      if (code == 200) {
                          //刷新头部用户列表下拉框
                          this.$store.dispatch('GetUserByCompany');
                          this.$message.success(this.$t('pro.Editcampaigns.operationSuccess'),1.5).then(() => {
                              this.$router.push({path: '/admin/managetransactions'})
                          })
                      }
                  }).finally(() => {
                      this.loading = false;
                  })
              }, 1000);
          }
        })
      },

      changeUserByCompany(id) {
          this.$nextTick(() => {
              this.userId = id
          })
      }
  },
  computed: {
      routes() {
        return this.$t('pro.AddTransactionID.routes')
      },
      methods() {
          return this.$t('pro.AddTransactionID.methods')
      },
      userByCompanys() {
         let muserList =  this.userByCompany.map(company => {
            return {
                id: company.id,
                value:`${company.company} | ${company.firstName} | ${company.lastName} | ID#${company.id} | $${Math.floor(company.surplusAmount * 100) / 100 || 0}`,
            };
          });
          let id = this.$route.params.userId || 0;

          muserList.find((item) => {
              if(item.id == id) {
                  this.$nextTick(() => {
                      this.form.setFieldsValue({'userId': item.value });
                  })
              }
          });
          return muserList
      },
      userByCompany() {
        return this.$store.getters.userByCompany || [];
      },
  },
}
</script>

<style lang="less">
.addtransaction-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 992px) {
  .addtransaction-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .addtransaction-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>
